<header>
    <title>用户查询</title>
</header>
{include file="public/header" /}
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="demoTable">
                搜索ID：
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="admin_id" autocomplete="off">
                </div>
                管理员名：
                <div class="layui-inline">
                    <input class="layui-input" name="admin_name" id="admin_name" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
            <table class="layui-hide" id="test" lay-filter="test"></table>

            <script type="text/html" id="toolbarDemo">

                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                    <button class="layui-btn layui-btn-sm"lay-event="add">添加</button>
                </div>
            </script>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script>
                layui.use('table', function(){
                    var table = layui.table;

                    table.render({
                        elem: '#test'
                        ,url:'data'
                        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                            title: '提示'
                            ,layEvent: 'LAYTABLE_TIPS'
                            ,icon: 'layui-icon-tips'
                        }]
                        ,title: '用户数据表'
                        ,cols: [[
                            {type: 'checkbox', fixed: 'left'}
                            ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                            ,{field:'admin_name', title:'管理员名', width:120, edit:'text'}
                            ,{field:'admin_pwd', title:'密码', width:120}
                            , {field:'status', title:'状态', width:120}
                            , {field:'role_name', title:'角色名', width:240}
                            ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                        ]]
                        ,page: true
                        ,limit:2
                        ,id:'testReload'
                    });

                    //头工具栏事件
                    table.on('toolbar(test)', function(obj){
                        var checkStatus = table.checkStatus(obj.config.id);
                        switch(obj.event){
                            case 'getCheckData':
                                var data = checkStatus.data;
                                layer.alert(JSON.stringify(data));
                                break;
                            case 'getCheckLength':
                                var data = checkStatus.data;
                                layer.msg('选中了：'+ data.length + ' 个');
                                break;
                            case 'isAll':
                                layer.msg(checkStatus.isAll ? '全选': '未全选');
                                break;

                            //自定义头工具栏右侧图标 - 提示
                            case 'LAYTABLE_TIPS':
                                layer.alert('这是工具栏右侧自定义的一个图标按钮');
                                break;

                            case 'add':
                                location.href="add";
                                break;
                        };
                    });

                    //监听行工具事件
                    table.on('tool(test)', function(obj){
                        var data = obj.data;
                        //console.log(obj)
                        if(obj.event === 'del'){
                            layer.confirm('真的删除行么', function(index){
                            $.post(
                                'del',
                                {
                                    id:data.id,
                                },
                                function (data) {
                                    if(data.code == 0){
                                        alert(data.msg); //弹窗需要做高级点
                                    }else {
                                        alert(data.msg);
                                    }
                                }
                            )
                                obj.del();
                                layer.close(index);
                            });
                        } else if(obj.event === 'edit'){
                           location.href="update/id/"+data.id;
                        }
                    });
                    var $ = layui.$, active = {
                        reload: function(){
                            var admin_id = $('#admin_id').val();
                            var admin_name = $('#admin_name').val();

                            //执行重载
                            table.reload('testReload', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                                ,where: {
                                    id:admin_id,
                                    admin_name:admin_name
                                }
                            }, 'data');
                        }
                    };

                    $('.demoTable .layui-btn').on('click', function(){
                        var type = $(this).data('type');
                  
                        active[type] ? active[type].call(this) : '';
                    });
                });
            </script>
            {include file="public/footer" /}